<template>
<div class="total">

    <h1>商标续展注册申请书</h1>

    <el-form :label-positon="labelPosition" label-width="180px" size="mini">
        <el-form-item label="申请人名称(中文)：">
            <span>{{ formData.appName }}</span>
        </el-form-item>
        <el-form-item label="(英文)：">
            <span>{{ formData.appNameEn }}</span>
        </el-form-item>

        <el-form-item label="申请人地址(中文)：">
            <span>{{ formData.busAddress }}</span>
        </el-form-item>
        <el-form-item label="(英文)：">
            <span>{{ formData.appAddEn }}</span>
        </el-form-item>

        <el-form-item label="邮政编码：">
            <span>{{ formData.postCode }}</span>
        </el-form-item>

        <el-form-item label="联系人：">
            <span>{{ formData.contacts }}</span>
        </el-form-item>
         <el-form-item label="邮箱：">
            <span>{{ formData.email }}</span>
        </el-form-item>

        <el-form-item label="电话：">
            <span>{{ formData.phone }}</span>
        </el-form-item>

        <!-- <el-form-item label="代理机构名称：">
            <span>{{ formData.deptName }}</span>
        </el-form-item> -->

        <el-form-item label="商标注册号：">
            <span>{{ formData.appNum }}</span>
        </el-form-item>

        <el-form-item label="是否共用商标：">
            <span v-if="formData.isComm==0?false:true">是</span>
              <span v-if="formData.isComm==0?true:false">否</span> 
        </el-form-item>
        <el-form-item label="类别：">
            <span>{{ formData.model }}</span>
        </el-form-item>

        <el-form-item label="营业执照：">
            <imgshow>
                <img class="business-license" :src="mconfig.host+formData.busimg" alt="" />
            </imgshow>
        </el-form-item>
        
        <el-form-item v-if="formData.appliType==0?false:true" label="身份证正反面：">
             <imgshow>
                <img class="identity-card" :src="this.mconfig.host+formData.idcardface" alt />
                <!-- <img class="identity-card" :src="this.mconfig.host+formData.idcardimg" alt /> -->
            </imgshow>  
        </el-form-item>

         <el-form-item label="网上确认书：">
            <imgshow>
                <img class="business-license" :src="mconfig.host+formData.qrfile" alt="" />
            </imgshow>
        </el-form-item>
        <el-form-item label="其他附件：" v-if="formData.otherfile.length > 0">
          <imgshow v-for="item, index in formData.otherfile" :key="index">
            <img class="business-license" :src="mconfig.host+item" alt="" />
          </imgshow>
        </el-form-item>


    </el-form>

    <!-- <div class="signs" >
        <el-row>
          <el-col :span="9" :offset="3">
            <span>申请人章戳(签字):</span>
          </el-col>
          <el-col :span="9" :offset="3">
            <span>代理机构章戳:</span>
          </el-col>
        </el-row>
      </div>
      <el-row>
        <el-col :span="9" :offset="15">
          <span>代理人签字:</span>
        </el-col>
      </el-row> -->

    <div class="form-content">
        <div v-if="append.length">
            <div class="model-title">
                <h4>商标续展注册申请书</h4>
                <p>(附页)</p>
                <p style="font-size:16px;margin-top:18px;margin-bottom:10px">其他共有许可人</p>
            </div>
            <proAppend :callback="append"></proAppend>
            <el-form class="model-form model-formmin " label-width="120px" size="small">
                <div v-for="(item,index) in append" :key="index">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item :label="index+1 +'.名称(中文) :'">
                                <span>{{item.partNameCh}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="(英文) :">
                                <span>{{item.partNameEn}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="地址(中文) :">
                                <span>{{item.partAddrCh}}</span>
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :span="10" style="text-align:right">
                <span class="signature">（章戳/签字）</span>
              </el-col> -->
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="(英文) :">
                                <span>{{item.partAddrEn}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
        </div>
        <!-- <el-form :label-positon="labelPosition" label-width="280px" size="mini">

        <el-form-item label="1.名称(中文):"></el-form-item>
        <el-form-item label="(英文):"></el-form-item>
        <template>
          <div class="same-line">
            <el-form-item label="地址(中文):"></el-form-item>
            <span class="sign">(章戳/签字)</span>
          </div>
        </template>

        <el-form-item label="2.名称(中文):"></el-form-item>
        <el-form-item label="(英文):"></el-form-item>
        <template>
          <div class="same-line">
            <el-form-item label="地址(中文):"></el-form-item>
            <span class="sign">(章戳/签字)</span>
          </div>
        </template>
        <el-form-item label="(英文):"></el-form-item>
      </el-form>-->
    </div>
</div>
</template>

<script>
import imgshow from "../common/imgshow"
import proAppend from "../common/proAppend"
export default {
    components:{
        imgshow,
        proAppend
    },
    data() {
        return {
            // 商标续展注册申请
            // 右对齐
            labelPosition: "right",
            // 字段名
            formData: {
                ageName: "", // 受理处名称
                appAddCn: "", // 申请人地址(中文)
                appAddEn: "", // 申请人地址(英文)
                appName: "", // 申请人名称(中文)
                appNameEn: "", // 申请人名称(英文)
                appNum: "", // 商标注册号
                branchNetworkId: "", // 网点编号
                contacts: "", // 联系人
                id: "", // 主键
                imgAdd: [], // 身份证或者营业执照地址
                isComm: ["1"], // 是否公用商标
                model: "", // 类别
                phone: "", // 电话
                postCode: "", // 邮政编码
                proAppendJson: "", // 共享人json
                subStatus: "1", // 状态
                userId: "", // 用户id
                // idcardimg: "",
                idcardface: "",
                busimg: "",
                deptName:'',//代理机构名称
            },
            append: '', // 共享人
            id: "",
        };
    },
    methods: {
        funb(s) {
            this.$http
                .get("/trademark/proTExtension/findByIdDetl", {
                    params: {
                        id: s,
                    },
                })
                .then((res) => {
                    console.log(res);
                    this.formData = res.data.data.data;
                    this.formData.otherfile = JSON.parse(this.formData.otherfile);
                    this.append = res.data.data.append;
                    if (this.formData.isComm == 1) {
                        this.formData.isComm = ["1"];
                    } else {
                        this.formData.isComm = ["0"];

                    }
                    // console.log(this.mconfig.host+this.formData.qrfile)
                    console.log(this.formData)

                });
        },
    },
    mounted() {
        this.id = this.$route.query.id;
        this.funb(this.id);
        ////console.log(this.formData.isComm);
    },
};
</script>

<style scoped>
.identity-card {
    width: 350px;
    height: 224px;
    margin-top: 5px;
    display: inline-block;
}

.business-license {
    width: 500px;
    margin-top: 5px;
    margin-bottom: 20px;
}

.model-form.model-formmin {
    margin-left: 232px;
}

.signs {
    display: none;
}

.form-list {

    background: #fff;
    padding: 0.7rem;
}

.form-head {
    text-align: center;
}

.form-head h1 {
    font-size: 29px;
    font-weight: normal;
}

.form-head p {
    font-size: 18px;
}

.form-content {
    width: 1000px;

}

.form-list /deep/ .el-form-item__label {
    font-size: 18px;
    border-bottom: none;
    height: 30px;
}

.form-list /deep/ .el-form-item__content {
    font-size: 18px;
    border-left: none;
    border-bottom: none;
    padding-left: 10px;
    height: 30px;
    box-sizing: border-box;
}

.form-list ::v-deep .el-form-item {
    margin: 0;
}

.form-list .el-input.el-input--mini {
    font-size: 14px;
}

.same-line {
    display: flex;
    justify-content: space-between;
}

.same-line .sign {
    font-size: 18px;
    color: rgb(191, 191, 191);
}

.same-line .el-form-item {
    width: 50%;
}

.same-line-s {
    display: flex;
    justify-content: space-between;
}

.same-line-s /deep/ .el-checkbox {
    width: 50%;
    text-align: left;
}

.form-list /deep/ .el-checkbox .el-checkbox__label {
    font-size: 18px;
}

.img-box {
    width: 150px;
    height: 150px;
    display: flex;
}

.img-box img {
    margin-right: 10px;
    width: 100%;
    height: 100%;
}

.form-list .signs .el-row {
    margin: 150px 0;
}

.form-list .el-row .el-col {
    text-align: left;
}

.form-list .el-row .el-col span {
    font-size: 18px;
}

.total {
    width: 1200px;
    margin: 0 auto;

}

.total h1 {
    padding: 30px 0;
    margin-left: 220px;
    font-weight: 500;
    font-size: 30px;
    /* margin-top: 30px; */
}

.total .sign {
    margin-top: 50px;
    text-align: center;
}

.el-form {
    margin-left: 248px;
}

.total div {
    margin-bottom: 0;
}

.head div .desClass {
    width: 200px;
}

.total .head .information {
    margin-bottom: 30px;
}

.total .head .domestic {
    margin-bottom: 20px;
}

.total .head .choice span {
    margin-left: 50px;
}

/* 签字 */
.sign {
    display: flex;
    justify-content: center;
}

.sign div {
    width: 200px;
    margin: 15px;
}

/* 代理人 */
.signs .agent {
    margin-top: 160px;
    margin-right: 330px;
    text-align: right;
}

.signs .careful {
    margin-top: 40px;
    margin-left: 310px;
    color: #999;
}

/* 附加页 */
.model-title {

    font-size: 28px;
    color: #666;
    font-weight: 400;
    margin-bottom: 40px;
}

.model-title>h4 {
    font-size: 22px;
    font-weight: normal;
    margin-top: 30px;
    margin-left: 220px;
}

.model-title p {
    font-size: 19px;
    margin-left: 253px;
    margin-top: 15px;
    width: 119px;
    text-align: center;
}

ul,
li {
    padding: 0;
    margin: 0;
    list-style: none;
}

.additional {
    margin-top: 30px;
    padding-bottom: 200px;
}

.additional h2 {

    font-weight: 500;
}

/* .additional .other {
  margin-top: 40px;
} */
.additional .other .main {
    text-align: center;
    margin-top: 20px;
}

.additional ul {
    margin-top: 25px;
    margin-left: 175px;
}

.additional ul li {
    margin: 10px 0;
}

.additional ul li span {
    display: inline-block;
    width: 106px;
    text-align: right;
    color: #000;
}

.additional ul li p {
    display: inline-block;
    margin-left: 300px;
    color: #ccc;
    margin-top: -8px;
}

.otherBox {
    margin-left: 10px;
    text-align: left !important;
}

.el-form {
    margin-left: 174px;
}
</style>
